<template>
  <mapgis-web-map
      crs="EPSG:3857"
      :center="[125.3,43.85]"
      :zoom="10"
    >    

    <!-- 基础底图-天地图（矢量）@Web墨卡托 -->
    <mapgis-rastertile-layer
      layerId="tdt-vec_w"
      url="http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
    />
    <!-- 基础底图-天地图（矢量注记）@Web墨卡托3857 -->
    <mapgis-rastertile-layer
      layerId="tdt-cva_w"
      url="http://t0.tianditu.com/DataServer?T=cva_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
    />

    <!-- 基础底图-天地图（影像）@Web墨卡托3857 -->
    <mapgis-rastertile-layer
      layerId="tdt-img_w"
      url="http://t0.tianditu.com/DataServer?T=img_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
    />
    <!-- 基础底图-天地图（影像注记）@Web墨卡托3857 -->
    <!-- <mapgis-rastertile-layer
      layerId="tdt-cia_w"
      url="http://t0.tianditu.com/DataServer?T=cia_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
    /> -->

    <!-- 基础底图-吉林一号切片影像 @Web墨卡托3857 -->
    <mapgis-rastertile-layer
        layerId="myDiTu_jl1"
        url="https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=73ad26c4aa6957eef051ecc5a15308b4&tk=3eaf089e32d2ecfd0eabc53543b8610e&sch=wmts"
    />
     <!-- 基础底图-天地图（影像注记）@Web墨卡托3857 -->
     <mapgis-rastertile-layer
      layerId="tdt-cia_w"
      url="http://t0.tianditu.com/DataServer?T=cia_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
    />


     <!--地图左上角按钮栏-->
     <div id="myToolBtns" class="mytool-btns">
            <div id="buttonDiv" style="float: left;">
                <div class="navbtn-items" v-if=measureShow @click="togglePanel('measurePanelVisible','measureFlag')" title="地图量测" id="measureBtn">
                    <img src="../../assets/images/map_icons/measure.png">
                    <img v-show="measureFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                </div>
                <div class="navbtn-items" v-if=hawkeyeShow @click="togglePanel('hawkeyePanelVisible','hawkeyeFlag')" title="鹰眼" id="hawkeyeBtn">
                    <img src="../../assets/images/map_icons/measure.png">
                    <img v-show="hawkeyeFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                </div>
                <div class="navbtn-items" v-if=mapstateShow @click="togglePanel('mapstatePanelVisible','mapstateFlag')" title="地图状态栏" id="mapstateBtn">
                    <img src="../../assets/images/map_icons/measure.png">
                    <img v-show="mapstateFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                </div>

                <div class="navbtn-items" v-if=printShow @click="togglePanel('printPanelVisible','printFlag')" title="地图打印" id="printBtn">
                    <img src="../../assets/images/map_icons/measure.png">
                    <img v-show="printFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                </div>
                <div class="navbtn-items" v-if=scaleShow @click="togglePanel('scalePanelVisible','scaleFlag')" title="比例尺" id="scaleBtn">
                    <img src="../../assets/images/map_icons/measure.png">
                    <img v-show="scaleFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                </div>
                <div class="navbtn-items" v-if=drawShow @click="togglePanel('drawPanelVisible','drawFlag')" title="绘制工具" id="drawBtn">
                    <img src="../../assets/images/map_icons/measure.png">
                    <img v-show="drawFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                </div>
                <div class="navbtn-items" v-if=attributionShow @click="togglePanel('attributionPanelVisible','attributionFlag')" title="地图属性" id="attributionBtn">
                    <img src="../../assets/images/map_icons/measure.png">
                    <img v-show="attributionFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                </div>
            </div>
      </div>


    <!-- 导航控件 -->
    <mapgis-navigation showCompass showZoom />

    <!-- 比例尺(自定义) -->
    <mapgis-custom-scale
      :outStyle='{"position":"absolute","zIndex":900,"left":"10px","bottom":"30px","maxHeight":"300px","width":"220px"}'
      :class="{'layer-hide':scalePanelVisible}"
    />

    <!-- 全屏 -->
    <mapgis-fullscreen position="top-right" />

    <!-- 鹰眼 -->
    <mapgis-hawkeye :class="{'layer-hide':hawkeyePanelVisible}" />


    <!-- 量测工具(高级模式) -->
    <div class="measure-story-control" :class="{'layer-hide':measurePanelVisible}" id="measureTool">
      <mapgis-measure enableControl isAdvanceControl></mapgis-measure>
    </div>

    
    <!-- 地图状态栏（使用自定义模式） -->
    <div class="my-map-state"  :class="{'layer-hide':mapstatePanelVisible}">
        <!-- <mapgis-state :default="true" scale level lng lat /> -->
        <mapgis-state :default="false">
          <template v-slot:default="{state}">
            <mapgis-ui-input-group size="default" class="mapgis-test-2d-statebar">
              <mapgis-ui-input addon-before="级别" :value="state.level"/>
              <mapgis-ui-input addon-before="比例尺" :value="state.scale"/>
              <mapgis-ui-input addon-before="经度" :value="state.lng" />
              <mapgis-ui-input addon-before="纬度" :value="state.lat"/>
            </mapgis-ui-input-group>
          </template>
        </mapgis-state>
    </div>

    <!-- 地图打印控件 -->
    <mapgis-ui-collapse-card
      :outStyle='{"position":"absolute","zIndex":700,"right":"400px","top":"60px","width":"300px"}'
      position="top-right"
      title="打印"
      :class="{'layer-hide':printPanelVisible}"
      id="printPanel"
    >
      <!-- <vue-component-491-AIcon slot="icon-hiden" :spin="false">
        <use xlink:href="#mapgis-huizhi1" />
      </vue-component-491-AIcon> -->
      <div slot="title">
        <span class="mapgis-custom-scale-card-title">绘制</span>
      </div>
      <!-- <div slot="extra">
        <vue-component-491-AIcon :spin="false">
          <use xlink:href="#mapgis-huizhi1" />
        </vue-component-491-AIcon>
      </div> -->
      <mapgis-print delay :delayTime="1000" />
    </mapgis-ui-collapse-card>

    <mapgis-ui-card class="mapgis-test-custom-scale" :class="{'layer-hide':printPanelVisible}">
      <mapgis-custom-scale />
    </mapgis-ui-card>

    <mapgis-ui-card class="mapgis-test-custom-legend">
      <mapgis-mvt-legend
        :column="1"
        :outStyle='{"position":"absolute","zIndex":900,"right":"5px","bottom":"10px","maxHeight":"300px","width":"260px"}'
      />
    </mapgis-ui-card>


    <!-- 地图属性说明小提示 -->
    <mapgis-attribution
        position="bottom-left"
        compact
        customAttribution="这里显示内容-二维属性组件"
        :class="{'layer-hide':attributionPanelVisible}"
    />

    <!-- Marker图形标注 -->
    <!-- <mapgis-marker
        :offset="[20,20]"
        :coordinates="[110,30]"
        color="#37495E"
        anchor="center"
        :draggable="false"
    /> -->

    <!-- 要素编辑工具 -->
    <mapgis-draw enableControl :class="{'layer-hide':drawPanelVisible}" />

    

    <!-- 数据输入：查询框 -->
    <!-- <mapgis-ui-input-search
        placeholder="请输入要搜索的查询内容"        
        enterButton="查询"
    /> -->
    <!-- loading="" -->

    <!-- 数据输入：下拉选择器(分组类型) -->
    <!-- <mapgis-ui-select defaultValue="武汉" autoWidth enterButton="查询">
      <mapgis-ui-select-opt-group>
        <span slot="label">湖北省</span>
        <mapgis-ui-select-option value="黄冈">黄冈</mapgis-ui-select-option>
        <mapgis-ui-select-option value="武汉">武汉</mapgis-ui-select-option>
      </mapgis-ui-select-opt-group>
      <mapgis-ui-select-opt-group label="浙江省">
        <mapgis-ui-select-option value="杭州">杭州</mapgis-ui-select-option>
      </mapgis-ui-select-opt-group>
    </mapgis-ui-select>  -->
    
    

  </mapgis-web-map>
</template>

<script>
export default {
        name:'CommonMap',
        components: {
        },
        props: {
            mapCtrlTools:{
                type:Array,
                default:function () {
                    return []
                }
            },
            // lyrdata: {
            //     type: Array,
            //     default: []
            // },
            // mapParams: {
            //     type: Object,
            //     default: {}
            // },
            
        },
        data () {
            return {
              measureShow:true,//测量工具-功能启动图标按钮，默认false不显示                
              hawkeyeShow: true, //默认false不显示
              mapstateShow: true, //默认false不显示
              scaleShow: true, //显示比例尺,默认false不显示
              printShow: true, //默认false不显示
              drawShow: true, //默认false不显示
              attributionShow: true, //默认false不显示              
              
              measurePanelVisible: true, //默认true为隐藏
              hawkeyePanelVisible: true, //默认true为隐藏
              mapstatePanelVisible: true, //默认true为隐藏
              scalePanelVisible: true, //默认true为隐藏
              printPanelVisible: true, //默认true为隐藏              
              drawPanelVisible: true, //默认true为隐藏
              attributionPanelVisible: true, //默认true为隐藏

              measureFlag:false, //测量选中显示红色小标志，默认false为隐藏                
              hawkeyeFlag:false, //鹰眼选中显示红色小标志，默认false为隐藏
              mapstateFlag:false, //地图状态栏选中显示红色小标志，默认false为隐藏
              scaleFlag:false, //比例尺选中显示红色小标志，默认false为隐藏
              printFlag:false, //地图打印-选中显示红色小标志，默认false为隐藏
              drawFlag:false, //绘制工具-选中显示红色小标志，默认false为隐藏
              attributionFlag:false, //地图属性-选中显示红色小标志，默认false为隐藏
              

                highLightLayer: {},//用于高亮的图层
                highLightVector: {},//highLightLayer图层的源
                highLightStyle: {},//highLightLayer图层的style

                location_blue:"",
                location_green:"",
                
                value1: [],
                value2: [],

                attQueryConditions:"NAME like '%区%'",

                //热力图
                heatmap_radius: 45, //热力图-热点半径；默认45
                heatmap_blur: 70, //热力图-模糊尺寸；默认70

                //缓冲区分析
                buffer_radius:20000, //（单圈）缓冲半径，默认20000米
                radiusStr:'1000,5000,12000,20000', //（多圈）缓冲半径

                //地图量测
                drawSource: {},//图层数据源
                drawVector: {},//图层

            }
        },
        methods:{
            //切换相关面板（显示/隐藏）
            togglePanel(attr,attr2){
                this[attr] = !this[attr];
                this[attr2] = !this[attr2];
            },           

            //地图中的面板可拖动
            dragFunc(id) {
                var Drag = document.getElementById(id);
                Drag.onmousedown = function(event) {
                    var ev = event || window.event;
                    event.stopPropagation();
                    var disX = ev.clientX - Drag.offsetLeft;
                    var disY = ev.clientY - Drag.offsetTop;
                    document.onmousemove =
                        function(event) {
                            var ev = event ||
                                window.event;
                            Drag.style.left = ev.clientX - disX + "px";
                            Drag.style.top = ev.clientY -
                                disY + "px";
                            Drag.style.cursor = "move";
                        };
                };
                Drag.onmouseup = function () {
                    document.onmousemove = null;
                    this.style.cursor = "default";
                };
            }
        },
        created(){
            //region 地图左上角-功能启动图标按钮-初始化控制
            // if(this.mapCtrlTools !== undefined && this.mapCtrlTools.length>0){
            //     this.mapCtrlTools.forEach(item=>{
            //         if(item === 1){
            //             this.layerShow = true; //图层控制-功能启动图标按钮
            //         }else if(item === 2){
            //             this.measureShow = true; //测量工具-功能启动图标按钮
            //         }else if(item === 3){
            //             this.printShow = true; //地图打印-功能启动图标按钮
            //         }                    
            //     });
            // }
            //endregion
        },
        mounted(){
            /*地图初始化*/
            //this.initMyMap();
            /*让地图中的某些面板可拖动*/
            this.dragFunc("measureTool");
            this.dragFunc("printPanel");
            //this.dragFunc("sxcx"); //属性查询面板-可拖动           
        },
        watch:{},
        computed:{
            // lyrBox: function () {
            //     return 'lyrBoxDiv' + new Date().valueOf()
            // },
            // tdt: function () {
            //     return 'abcabc' + new Date().valueOf()
            // }
        }
    }
</script>

<style scoped>
/*地图工具栏相关样式  */
.mytool-btns{
    position: relative;
    /*left: 10px;*/
    margin-left:2.5em;
    top: 10px;
    height: 60px;
    /*width:320px;*/ /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
    width:450px; /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
    z-index: 2;
}

.navbtn-items{
    float: left;
    margin: 0 5px;
    /*border-right: 1px solid #788897; !*显示右侧的边框线*!*/
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    text-align: center;
}

.navBtnDiv{
    /*width: auto;*/
    /*background-color:rgba(0,0,0,0);*/
    margin-left: 55px;
    /*margin-top: 5px;*/
}
.navbtn-btn{
    margin-right: 10px;
}

.navbtn-items:hover{
    cursor: pointer;
}

.navbtn-items>img{
    width:36px;
    height:36px;
    padding:5px;
}
.item-selected {
    position: absolute;
    width: 25px !important;
    height: 25px !important;
    left: 15px !important;
    bottom: 0;
}

.layer-hide {
    display:none;
}



.measure-story-control {
    position: absolute;
    top: 15px;
    left: 40%;

    z-index: 9;
    background: aliceblue;
    border-radius: 10px;
}

.my-map-state {
    position: fixed;
    bottom: 10px;
    left: 20%;
    /* right: 10px; */
    /* margin: auto 0; */
    /* right: 10px; */
    z-index: 9;
    background: aliceblue;
    /* border-radius: 10px; */
    /* height: 120px; */
    /* width: 99%; */
}
.mapgis-ui-input-group-wrapper {
    display: inline-block;
    width: 220px !important;
    text-align: start;
    vertical-align: top;
}

</style>
